<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<title>打印学生报名信息</title>
		<link rel="icon" type="image/x-icon" href="images/favicon.png" />
		<style type="text/css">
			#printTemplate {
				display: none;
			}

			.printPage {

			}

			.printPage .title {
				font-size: 16px;
				font-weight: bold;
				text-align: center;
				margin-bottom: 16px;
				color: black;
			}

			.printPage .table {
				width: 100%;
				border-collapse: collapse;
				border-spacing: 0;
			}

			.printPage .table th {
				background-color: #f0f0f0;
			}

			.printPage .table th,
			.printPage .table td {
				border: 1px solid #d9d9d9;
				width: 20%;
				height: 64px;
				text-align: center;
			}

			.printPage .table img {
				max-width: 100%;
				max-height: 128px;
			}

			.printPage .header {
				width: 100%;
				margin-bottom: 16px;
			}

			.printPage .header span {
				border-bottom: 1px solid;
				padding: 0 4px;
			}

			.printPage .header label {
				margin: 0 8px;
			}

			.printPage .header span,
			.printPage .header label,
			.printPage .footer span,
			.printPage .footer label {
				font-size: 16px;
			}

			.printPage .footer {
				width: 100%;
			}
			.printPage .footer span {
				border-bottom: 1px solid;
				padding: 0 80px;
			}
		</style>
		<script type="text/javascript">
			var basicUrl = 'https://ndx2345.top:446/';
			var mappingStatus = {
				1: '报名信息待审核',
				2: '审核通过',
				3: '审核拒绝',
				5: '已核实交费',
			};
			var types = {
				1: '职教高考',
				2: '职业中专',
				3: '职业中专(3+2)',
			};
			var situationMapping = ['应届', '往届'];
			var residTypeMapping = {
				140402: '潞州区',
				140403: '潞州区',
				140411: '潞州区',

				140404: '上党区',
				140421: '上党区',

				140405: '屯留区',
				140424: '屯留区',

				140406: '潞城区',
				140481: '潞城区',

				140423: '襄垣县',
				140425: '平顺县',
				140426: '黎城县',
				140427: '壶关县',
				140428: '长子县',
				140429: '武乡县',
				140430: '沁县',
				140431: '沁源县',

				0: '外地',
			};
			var mappingSpecial = {};
			var domTemp, domPages;
			window.onload = init;

			function init() {
				var errMsg = '';
				domTemp = document.getElementById('printTemplate');
				domPages = document.getElementById('printPages');
				if (!domTemp) errMsg = '未找到printTemplate';
				if (!errMsg && !domPages) errMsg = '未找到printPages';
				if (errMsg) {
					document.body.textContent = errMsg;
					return;
				}

				var token = sessionStorage.getItem('token');
				var userId = sessionStorage.getItem('userId');
				var action = localStorage.getItem('action');
				if (!token) errMsg = 'token不能为空';
				if (!errMsg && !userId) errMsg = 'userId不能为空';
				if (!errMsg && !action) errMsg = 'action不能为空';
				if (errMsg) {
					domPages.textContent = errMsg;
					return;
				}
				userId -= 0;

				domPages.textContent = '正在进行网络请求, 请稍候..';

				var params = {
					token: token,
					userId: userId,
					currentPage: 1,
					pageSize: 10000,
				};
				funcRequest('basic/special/list', params, function(data) {
					data.map(function(item) {
						var id = item.id, pid = item.pid, name = item.name;
						mappingSpecial[id] = pid === '0' ?
							name : mappingSpecial[pid] + ' - ' + name;
					});

					var ids = localStorage.getItem('ids');
					var searchsStr = localStorage.getItem('searchs');
					if (ids) params.ids = ids;

					errMsg = '';
					var searchsObj = [];
					try {
						searchsObj = JSON.parse(searchsStr);
					} catch (err) {
						errMsg = err.toString();
						console.log('发生错误', 'JSON.parse(searchs)', errMsg);
					}
					if (!errMsg) params.searchs = searchsObj;

					funcRequest('student/' + action + '/listAll', params, funcMakeTable);
				});
			}

			// 网络请求
			function funcRequest(apiPath, params, callback) {
				fetch(basicUrl + apiPath, {
					method: 'post',
					body: JSON.stringify(params),
				})
					.then(response => response)
					.then(response => response.json())
					.then(response => {
						if (response.status === 1) {
							domPages.textContent = response.msg;
							return;
						}

						var data = response.root;
						if (callback) callback(data);
					});
			}

			// 渲染数据
			function funcRender(data) {
				var ethnicData = [
				  { "value": 1, "label": "汉族" },
				  { "value": 2, "label": "回族" },
				  { "value": 3, "label": "蒙古族" },
				  { "value": 4, "label": "满族" },
				  { "value": 5, "label": "朝鲜族" },
				  { "value": 6, "label": "赫哲族" },
				  { "value": 7, "label": "达斡尔族" },
				  { "value": 8, "label": "鄂温克族" },
				  { "value": 9, "label": "鄂伦春族" },
				  { "value": 10, "label": "东乡族" },
				  { "value": 11, "label": "土族" },
				  { "value": 12, "label": "撒拉族" },
				  { "value": 13, "label": "保安族" },
				  { "value": 14, "label": "裕固族" },
				  { "value": 15, "label": "维吾尔族" },
				  { "value": 16, "label": "哈萨克族" },
				  { "value": 17, "label": "柯尔克孜族" },
				  { "value": 18, "label": "锡伯族" },
				  { "value": 19, "label": "塔吉克族" },
				  { "value": 20, "label": "乌孜别克族" },
				  { "value": 21, "label": "俄罗斯族" },
				  { "value": 22, "label": "塔塔尔族" },
				  { "value": 23, "label": "藏族" },
				  { "value": 24, "label": "门巴族" },
				  { "value": 25, "label": "珞巴族" },
				  { "value": 26, "label": "羌族" },
				  { "value": 27, "label": "彝族" },
				  { "value": 28, "label": "白族" },
				  { "value": 29, "label": "哈尼族" },
				  { "value": 30, "label": "傣族" },
				  { "value": 31, "label": "傈僳族" },
				  { "value": 32, "label": "佤族" },
				  { "value": 33, "label": "拉祜族" },
				  { "value": 34, "label": "纳西族" },
				  { "value": 35, "label": "景颇族" },
				  { "value": 36, "label": "布朗族" },
				  { "value": 37, "label": "阿昌族" },
				  { "value": 38, "label": "普米族" },
				  { "value": 39, "label": "怒族" },
				  { "value": 40, "label": "德昂族" },
				  { "value": 41, "label": "独龙族" },
				  { "value": 42, "label": "基诺族" },
				  { "value": 43, "label": "苗族" },
				  { "value": 44, "label": "布依族" },
				  { "value": 45, "label": "侗族" },
				  { "value": 46, "label": "水族" },
				  { "value": 47, "label": "仡佬族" },
				  { "value": 48, "label": "壮族" },
				  { "value": 49, "label": "瑶族" },
				  { "value": 50, "label": "仫佬族" },
				  { "value": 51, "label": "毛南族" },
				  { "value": 52, "label": "京族" },
				  { "value": 53, "label": "土家族" },
				  { "value": 54, "label": "黎族" },
				  { "value": 55, "label": "畲族" },
				  { "value": 56, "label": "高山族" }
				];
				var mappingEthnic = {};
				ethnicData.map(function(item) {
					mappingEthnic[item.value] = item.label;
				});

				return data.map(function(item) {
					var newItem = item;
					newItem.sex = item.sex === '1' ? '男' : '女';
					newItem.lodging = item.lodging === '1' ? '住校' : '不住校';
					newItem.birthday = item.birthday.substr(0, 10);
					newItem.ethnic = mappingEthnic[item.ethnic];
					newItem.specialId = mappingSpecial[item.specialId] + ' - ' + types[item.type];
					if (item.status === '3') {
						newItem.status = mappingStatus[item.status] + '：' + item.feedback;
					} else if (item.status === '2' || item.status === '5') {
						newItem.status = mappingStatus[item.status] + '，审核员：' + item.auditAdminName;
					} else {
						newItem.status = mappingStatus[item.status];
					}

					newItem.situation = situationMapping[item.situation];
					newItem.citytown = item.citytown === '1' ? '城市户口' : '农业户口';
					newItem.residType = residTypeMapping[item.residType];
					return newItem;
				});
			}

			// 生成表格实体
			function funcMakeTable(data) {
				var errMsg = '';
				if (!data || data.length === 0) errMsg = '没有可供打印的信息，请调整查询选项。';
				if (errMsg) {
					domPages.textContent = errMsg;
					return;
				}

				domPages.textContent = '正在生成表格, 请稍候..';

				var newData = funcRender(data);
				var html = '';
				var space = funcGetSearch('space');
				console.log('total', newData.length);

				for (var i = 0; i < newData.length; i += 1) {
					var item = newData[i];
					console.log(item.id, item.name, item);

					for (var key in item) {
						var value = item[key];
						var doms = domTemp.getElementsByClassName(key);
						if (doms.length === 0) continue;

						var dom = doms[0];
						if (dom.tagName === 'IMG') {
							if (value) dom.src = basicUrl + 'upload/' + value.replace('_sm.','.');
							else dom.src = '';
						} else dom.textContent = value;
					}

					// 注意: 最后一张表不需要附加底边距, 否则有可能会尾随一张空白页!
					const mb = i < newData.length - 1 ? ' style="margin-bottom:' + space + 'px;"' : '';
					html += '<div class="printPage"' + mb + '>';
					html += domTemp.innerHTML;
					html += '</div>';
				}

				domPages.innerHTML = html;
				var imgs = domPages.getElementsByTagName('img');
				for (var i = 0; i < imgs.length; i += 1) {
					var img = imgs[i];
					img.className += ' imageLoading';
					img.onload = funcImageOnload;
					img.onerror = funcImageOnload;
				}
			}

			// 获取地址栏里的某一个参数的值
			function funcGetSearch(paramsName, isString) {
				var search = location.search;
				var errMsg = '';
				let paramsValue = '';
				if (search.indexOf(paramsName) === -1) errMsg = '地址栏参数不能为空';
				if (!errMsg) {
					const searchData = search.split('=');
					if (searchData.length === 1) errMsg = '地址栏参数不能为空';
					paramsValue = searchData[1];
					if (!errMsg && paramsValue === '') errMsg = '地址栏参数不能为空';
					if (!errMsg && !isString && isNaN(paramsValue)) errMsg = '地址栏参数的值必须是一个数字';
				}
				if (errMsg) {
					console.log(errMsg);
					if (isString) return '';
					else return 0;
				} else {
					if (isString) return paramsValue;
					else return paramsValue - 0;
				}
			}

			// 图片的onload事件
			function funcImageOnload(e) {
				e.target.classList.remove('imageLoading');
				var imgs = domPages.getElementsByClassName('imageLoading');
				if (imgs.length === 0) {
					// 好的, 图片都加载完了, 这下可以打印了!
					window.print();
				}
			}
		</script>
	</head>
	<body>
		<div id="printTemplate">
			<div class="title">长治市职业高级中学招生登记表</div>
			<table class="header">
				<tbody>
				<tr>
					<td>
						<label>报名号</label>
						<span class="signup"></span>
					</td>
					<td align='right'>
						<label>准考证号</label>
						<span class="examCardNum"></span>
					</td>
				</tr>
				</tbody>
			</table>

			<table class="table">
				<tbody>
					<tr>
						<th>姓名</th>
						<td class="name"></td>
						<th>性别</th>
						<td class="sex"></td>
						<td rowSpan="3">
							<img class="picture" src="" alt="" style="max-height: 192px;" />
						</td>
					</tr>
					<tr>
						<th>出生日期</th>
						<td class="birthday"></td>
						<th>民族</th>
						<td class="ethnic"></td>
					</tr>
					<tr>
						<th>学生类别</th>
						<td class="situation"></td>
						<th>电话</th>
						<td>
							<div class="phone"></div>
							<div class="phoneBackup"></div>
						</td>
					</tr>
					<tr>
						<th>中考成绩</th>
						<td class="sum"></td>
						<th>身份证号</th>
						<td class="idCardNum" colspan="2"></td>
					</tr>
					<tr>
						<th>毕业学校</th>
						<td class="school"></td>
						<th>家庭住址</th>
						<td colSpan="2" class="address"></td>
					</tr>
					<tr>
						<th style="height: 128px;">准考证</th>
						<td>
							<img class="examCard" src="" alt="" />
						</td>
						<th>身份证</th>
						<td>
							<img class="idCardFace" src="" alt="" />
						</td>
						<td>
							<img class="idCardBack" src="" alt="" />
						</td>
					</tr>
					<tr>
						<th colSpan="3">报考专业</th>
						<th>是否住校</th>
						<th>备注</th>
					</tr>
					<tr>
						<td class="specialId" colSpan="3"></td>
						<td class="lodging"></td>
						<td class="remark"></td>
					</tr>
					<tr>
						<th colSpan="3">所在居住地</th>
						<th colspan="2">特长</th>
					</tr>
					<tr>
						<td class="residType" colSpan="3"></td>
						<td class="speciality" colspan="2"></td>
					</tr>
					<tr>
						<th>推荐教师</th>
						<td class="recommend"></td>
						<th>审核情况</th>
						<td class="status" colSpan="3"></td>
					</tr>
				</tbody>
			</table>

			<table class="footer">
				<tbody>
				<tr>
					<td>
						<p>注意：报考本校所有专业，概不调换，请慎重选择。</p>
						<p>我已确认以上所有信息，坚决服从。</p>
					</td>
				</tr>
				<tr>
					<td>
						<label>签字：</label>
						<span></span>
					</td>
					<td align="right">
						<label>日期：</label>
						<span></span>
					</td>
				</tr>
				</tbody>
			</table>
		</div>
		<div id="printPages"></div>
	</body>
</html>
